<template>
  <div id="tabview">
    <!-- 基本信息 -->
    <section-header sectionTitle="商机研判表单-商机融能研判"></section-header>
    <van-field readonly required name="isAbility"
               :value="fromdata.isAbility" label="是否融入自有能力：" label-width="9em"
               :right-icon="canEdit ? 'arrow' : ''" @click="canEdit == true ? showOptionDialog('isAbility') : ''"
               placeholder="请选择是否融入自有能力" :rules="[{ required: canEdit, message: '' }]" />
    <van-field v-if="fromdata.isAbility == '是'" readonly required name="abilitySelect" autosize type="textarea" rows="1"
               :value="fromdata.abilitySelect" label="融自有能力甄别：" label-width="8em"
               :right-icon="canEdit ? 'arrow' : ''" @click="canEdit == true ? showOptionDialog('abilitySelect') : ''"
               placeholder="请选择融自有能力甄别" :rules="[{ required: canEdit, message: '' }]" />
    <myvan_field v-if="fromdata.isAbility == '否'" :canEdit="canEdit" :required='true' :type="'textarea'" :name='"abilityExplain"' :model='fromdata.abilityExplain'
                 :label='"无法融自有能力说明:"' :placeholder='"请填写无法融自有能力说明"'  @freshData='freshData($event)'/>
    <van-field readonly required name="isImplementation"
               :value="fromdata.isImplementation" label="是否自主实施：" label-width="7em"
               :right-icon="canEdit ? 'arrow' : ''" @click="canEdit == true ? showOptionDialog('isImplementation') : ''"
               placeholder="请选择是否自主实施" :rules="[{ required: canEdit, message: '' }]" />
    <van-field v-if="fromdata.isImplementation == '是'" readonly required name="implementationType" autosize type="textarea" rows="1"
               :value="fromdata.implementationType" label="项目自主实施类型：" label-width="9em"
               :right-icon="canEdit ? 'arrow' : ''" @click="canEdit == true ? showOptionDialog('implementationType') : ''"
               placeholder="请选择项目自主实施类型" :rules="[{ required: canEdit, message: '' }]" />
    <van-field v-if="fromdata.isImplementation == '是'" readonly required name="implementScope"
               :value="fromdata.implementScope" label="自主实施范围：" label-width="7em"
               :right-icon="canEdit ? 'arrow' : ''" @click="canEdit == true ? showOptionDialog('implementScope') : ''"
               placeholder="请选择自主实施范围" :rules="[{ required: canEdit, message: '' }]" />
    <myvan_field v-if="fromdata.isImplementation == '否'" :canEdit="canEdit" :required='true' :type="'textarea'"  :name='"implementationExplain"' :model='fromdata.implementationExplain'
                 :label='"无法自主实施说明:"' :placeholder='"请填写无法自主实施说明"'  @freshData='freshData($event)'/>
    <van-field readonly required name="isProfessionalAbility"
               :value="fromdata.isProfessionalAbility" label="是否使用专业公司能力：" label-width="11em"
               :right-icon="canEdit ? 'arrow' : ''" @click="canEdit == true ? showOptionDialog('isProfessionalAbility') : ''"
               placeholder="请选择是否使用专业公司能力" :rules="[{ required: canEdit, message: '' }]" />
    <myvan_field :canEdit="canEdit" :required='true' :name='"professionalAbilityExplain"' :type="'textarea'" :model='fromdata.professionalAbilityExplain'
                 :label='"使用或无法专业公司能力说明:"' :placeholder='"请填写使用或无法专业公司能力说明"'  @freshData='freshData($event)'/>
    <van-field readonly required name="abilityInformationState"
               :value="fromdata.abilityInformationState==true?'是':'否'" label="是否使用中台能力：" label-width="9em"
               :right-icon="canEdit ? 'arrow' : ''" @click="canEdit == true ? showOptionDialog('abilityInformationState') : ''"
               placeholder="请选择是否使用中台能力" :rules="[{ required: canEdit, message: '' }]" />

<!--    <section-header v-if="fromdata.abilityInformationState == true" sectionTitle="能力名称"></section-header>-->
    <div v-if="fromdata.abilityInformationState == true" class="mt10"
         style=" display: flex;border-bottom: 1px solid #ebedf0;">
      <div class="blue_item"></div>
      <span class="font15" style="display: flex; line-height: 33px;margin-left:5px;  flex:1;">能力名称</span>
      <van-button v-show="canEdit" block type="info" style="display: inline-block;width:auto;height: 33px;"
                  native-type="button" @click="choseZTNL">选择中台能力</van-button>
    </div>
    <el-table v-if="fromdata.abilityInformationState == true" :data="fromdata.abilityInformationModeList" border style="width: 100%" :header-cell-style="{ 'text-align': 'center' }"
              :cell-style="{ 'text-align': 'center' }" show-summary>
      <el-table-column prop="abilityProvider" label="能力提供方"/>
      <el-table-column prop="abilityName" label="能力名称"/>
      <el-table-column prop="abilityCode" label="能力编码"/>
    </el-table>
    <myvan_field v-if="fromdata.abilityInformationState != true" :canEdit="canEdit" :required='true' :type="'textarea'" :name='"abilityInformationExplain"' :model='fromdata.abilityInformationExplain'
                 :label='"无法使用中台能力说明:"' :placeholder='"请填写无法使用中台能力说明"'  @freshData='freshData($event)'/>
    <van-field readonly required name="isBenefits"
               :value="fromdata.isBenefits" label="效益是否符合项目管理要求：" label-width="13em"
               :right-icon="canEdit ? 'arrow' : ''" @click="canEdit == true ? showOptionDialog('isBenefits') : ''"
               placeholder="请选择效益是否符合项目管理要求" :rules="[{ required: canEdit, message: '' }]" />
    <myvan_field v-if="fromdata.isBenefits == '否'" :canEdit="canEdit" :required='true' :type="'textarea'" :name='"benefitsExplain"' :model='fromdata.benefitsExplain'
                 :label='"效益不符合要求的原因:"' :placeholder='"请填写效益不符合要求的原因"'  @freshData='freshData($event)'/>
    <van-field readonly required name="isOtherRisk"
               :value="fromdata.isOtherRisk" label="是否存在其他风险：" label-width="9em"
               :right-icon="canEdit ? 'arrow' : ''" @click="canEdit == true ? showOptionDialog('isOtherRisk') : ''"
               placeholder="请选择是否存在其他风险" :rules="[{ required: canEdit, message: '' }]" />
    <myvan_field v-if="fromdata.isOtherRisk == '是'" :canEdit="canEdit" :required='true' :type="'textarea'" :name='"otherRiskExplain"' :model='fromdata.otherRiskExplain'
                 :label='"可能存在的风险说明:"' :placeholder='"请填写可能存在的风险说明"'  @freshData='freshData($event)'/>
    <van-field readonly required name="isSecurityCapability"
               :value="fromdata.isSecurityCapability" label="是否使用安全能力：" label-width="9em"
               :right-icon="canEdit ? 'arrow' : ''" @click="canEdit == true ? showOptionDialog('isSecurityCapability') : ''"
               placeholder="请选择是否使用安全能力" :rules="[{ required: canEdit, message: '' }]" />
    <van-field v-if="fromdata.isSecurityCapability == '是'" readonly required name="securityCapability"
               :value="fromdata.securityCapability" label="涉及安全能力：" label-width="7em"
               :right-icon="canEdit ? 'arrow' : ''" @click="canEdit == true ? showOptionDialog('securityCapability') : ''"
               placeholder="请选择涉及安全能力" :rules="[{ required: canEdit, message: '' }]" />
    <myvan_field v-if="fromdata.isSecurityCapability == '否'" :canEdit="canEdit" :required='true' :type="'textarea'" :name='"securityCapabilityExplain"' :model='fromdata.securityCapabilityExplain'
                 :label='"无法使用安全能力说明:"' :placeholder='"请填写无法使用安全能力说明"'  @freshData='freshData($event)'/>

    <van-field readonly required name="isFiveCapability"
               :value="fromdata.isFiveCapability" label="是否使用5G能力:" label-width="9em"
               :right-icon="canEdit ? 'arrow' : ''" @click="canEdit == true ? showOptionDialog('isFiveCapability') : ''"
               placeholder="请选择是否使用5G能力" :rules="[{ required: canEdit, message: '' }]" />
    <van-field v-if="fromdata.isFiveCapability == '是'" readonly required name="fiveCapability"
               :value="fromdata.fiveCapability" label="涉及5G能力:" label-width="6em"
               :right-icon="canEdit ? 'arrow' : ''" @click="canEdit == true ? showOptionDialog('fiveCapability') : ''"
               placeholder="请选择涉及5G能力" :rules="[{ required: canEdit, message: '' }]" />
    <myvan_field v-if="fromdata.isFiveCapability == '否'" :canEdit="canEdit" :required='true' :type="'textarea'" :name='"fiveCapabilityExplain"' :model='fromdata.fiveCapabilityExplain'
                 :label='"无法使用5G能力说明:"' :placeholder='"请填写无法使用5G能力说明"'  @freshData='freshData($event)'/>
    <van-field readonly required name="isConferenceJudgment"
               :value="fromdata.isConferenceJudgment" label="是否需要进行会议研判：" label-width="11em"
               :right-icon="canEdit ? 'arrow' : ''" @click="canEdit == true ? showOptionDialog('isConferenceJudgment') : ''"
               placeholder="请选择是否需要进行会议研判" :rules="[{ required: canEdit, message: '' }]" />

    <section-header sectionTitle="商机研判表单-会审文件"></section-header>
<!--    九个类别模块-->
    <van-field v-if="huiqianType=='isNineOne'" readonly required name="isNineOne"
               :value="fromdata.isNineOne" label="是否涉及融自有能力-9One:" label-width="13em"
               :right-icon="canHQEdit ? 'arrow' : ''" @click="canHQEdit == true ? showOptionDialog('isNineOne') : ''"
               placeholder="请选择是否涉及融自有能力-9One" :rules="[{ required: canHQEdit, message: '' }]" />
    <div v-if="fromdata.isNineOne=='是'&&huiqianType=='isNineOne'">
      <van-field readonly required name="energyFusionOneFile" label="融能支撑方案文件:" label-width="9em" center>
        <template v-if="canHQEdit == true" #button >
          <van-uploader name="energyFusionOneFile" :after-read="didFinishPickingFiles">
            <van-button size="small" type="primary" color="#0f85cf">上传附件</van-button>
          </van-uploader>
        </template>
      </van-field>
      <div v-for="(fileitem, index) in fromdata.energyFusionOneFile" :key="fileitem.id"
           style="margin-left: 20px">
        <div readonly class="font14 fileLink" style="color: #0f85cf">
          <a target="_blank" @click="openFileUrlfun(fileitem.anonymousFilePath)">{{ fileitem.fileName }}</a>
        </div>
        <van-icon v-if="canHQEdit == true" name="close" color="#ea0023" size="20"
                  @click="deleteFile('energyFusionOneFile', index)" />
      </div>
    </div>
    <van-field v-if="huiqianType=='isFive'" readonly required name="isFive"
               :value="fromdata.isFive" label="是否涉及融自有能力-5G:" label-width="11em"
               :right-icon="canHQEdit ? 'arrow' : ''" @click="canHQEdit == true ? showOptionDialog('isFive') : ''"
               placeholder="请选择是否涉及融自有能力-5G" :rules="[{ required: canHQEdit, message: '' }]" />
    <div v-if="fromdata.isFive=='是'&&huiqianType=='isFive'">
      <van-field readonly required name="energyFusionFiveFile" label="融能支撑方案文件:" label-width="9em" center>
        <template v-if="canHQEdit == true" #button >
          <van-uploader name="energyFusionFiveFile" :after-read="didFinishPickingFiles">
            <van-button size="small" type="primary" color="#0f85cf">上传附件</van-button>
          </van-uploader>
        </template>
      </van-field>
      <div v-for="(fileitem, index) in fromdata.energyFusionFiveFile" :key="fileitem.id"
           style="margin-left: 20px">
        <div readonly class="font14 fileLink" style="color: #0f85cf">
          <a target="_blank" @click="openFileUrlfun(fileitem.anonymousFilePath)">{{ fileitem.fileName }}</a>
        </div>
        <van-icon v-if="canHQEdit == true" name="close" color="#ea0023" size="20"
                  @click="deleteFile('energyFusionFiveFile', index)" />
      </div>
    </div>
    <van-field v-if="huiqianType=='isIdc'" readonly required name="isIdc"
               :value="fromdata.isIdc" label="是否涉及融自有能力-IDC:" label-width="12em"
               :right-icon="canHQEdit ? 'arrow' : ''" @click="canHQEdit == true ? showOptionDialog('isIdc') : ''"
               placeholder="请选择是否涉及融自有能力-IDC" :rules="[{ required: canHQEdit, message: '' }]" />
    <div v-if="fromdata.isIdc=='是'&&huiqianType=='isIdc'">
      <van-field readonly required name="energyFusionIdcFile" label="融能支撑方案文件:" label-width="9em" center>
        <template v-if="canHQEdit == true" #button >
          <van-uploader name="energyFusionIdcFile" :after-read="didFinishPickingFiles">
            <van-button size="small" type="primary" color="#0f85cf">上传附件</van-button>
          </van-uploader>
        </template>
      </van-field>
      <div v-for="(fileitem, index) in fromdata.energyFusionIdcFile" :key="fileitem.id"
           style="margin-left: 20px">
        <div readonly class="font14 fileLink" style="color: #0f85cf">
          <a target="_blank" @click="openFileUrlfun(fileitem.anonymousFilePath)">{{ fileitem.fileName }}</a>
        </div>
        <van-icon v-if="canHQEdit == true" name="close" color="#ea0023" size="20"
                  @click="deleteFile('energyFusionIdcFile', index)" />
      </div>
    </div>
    <van-field v-if="huiqianType=='isIot'" readonly required name="isIot"
               :value="fromdata.isIot" label="是否涉及融自有能力-IOT:" label-width="12em"
               :right-icon="canHQEdit ? 'arrow' : ''" @click="canHQEdit == true ? showOptionDialog('isIot') : ''"
               placeholder="请选择是否涉及融自有能力-IOT" :rules="[{ required: canHQEdit, message: '' }]" />
    <div v-if="fromdata.isIot=='是'&&huiqianType=='isIot'">
      <van-field readonly required name="energyFusionIotFile" label="融能支撑方案文件:" label-width="9em" center>
        <template v-if="canHQEdit == true" #button >
          <van-uploader name="energyFusionIotFile" :after-read="didFinishPickingFiles">
            <van-button size="small" type="primary" color="#0f85cf">上传附件</van-button>
          </van-uploader>
        </template>
      </van-field>
      <div v-for="(fileitem, index) in fromdata.energyFusionIotFile" :key="fileitem.id"
           style="margin-left: 20px">
        <div readonly class="font14 fileLink" style="color: #0f85cf">
          <a target="_blank" @click="openFileUrlfun(fileitem.anonymousFilePath)">{{ fileitem.fileName }}</a>
        </div>
        <van-icon v-if="canHQEdit == true" name="close" color="#ea0023" size="20"
                  @click="deleteFile('energyFusionIotFile', index)" />
      </div>
    </div>
    <van-field v-if="huiqianType=='isLine'" readonly required name="isLine"
               :value="fromdata.isLine" label="是否涉及融自有能力-专线:" label-width="12em"
               :right-icon="canHQEdit ? 'arrow' : ''" @click="canHQEdit == true ? showOptionDialog('isLine') : ''"
               placeholder="请选择是否涉及融自有能力-专线" :rules="[{ required: canHQEdit, message: '' }]" />
    <div v-if="fromdata.isLine=='是'&&huiqianType=='isLine'">
      <van-field readonly required name="energyFusionLineFile" label="融能支撑方案文件:" label-width="9em" center>
        <template v-if="canHQEdit == true" #button >
          <van-uploader name="energyFusionLineFile" :after-read="didFinishPickingFiles">
            <van-button size="small" type="primary" color="#0f85cf">上传附件</van-button>
          </van-uploader>
        </template>
      </van-field>
      <div v-for="(fileitem, index) in fromdata.energyFusionLineFile" :key="fileitem.id"
           style="margin-left: 20px">
        <div readonly class="font14 fileLink" style="color: #0f85cf">
          <a target="_blank" @click="openFileUrlfun(fileitem.anonymousFilePath)">{{ fileitem.fileName }}</a>
        </div>
        <van-icon v-if="canHQEdit == true" name="close" color="#ea0023" size="20"
                  @click="deleteFile('energyFusionLineFile', index)" />
      </div>
    </div>
    <van-field v-if="huiqianType=='isInternet'" readonly required name="isInternet"
               :value="fromdata.isInternet" label="是否涉及融自有能力-物联网:" label-width="13em"
               :right-icon="canHQEdit ? 'arrow' : ''" @click="canHQEdit == true ? showOptionDialog('isInternet') : ''"
               placeholder="请选择是否涉及融自有能力-物联网" :rules="[{ required: canHQEdit, message: '' }]" />
    <div v-if="fromdata.isInternet=='是'&&huiqianType=='isInternet'">
      <van-field readonly required name="energyFusionInternetFile" label="融能支撑方案文件:" label-width="9em" center>
        <template v-if="canHQEdit == true" #button >
          <van-uploader name="energyFusionInternetFile" :after-read="didFinishPickingFiles">
            <van-button size="small" type="primary" color="#0f85cf">上传附件</van-button>
          </van-uploader>
        </template>
      </van-field>
      <div v-for="(fileitem, index) in fromdata.energyFusionInternetFile" :key="fileitem.id"
           style="margin-left: 20px">
        <div readonly class="font14 fileLink" style="color: #0f85cf">
          <a target="_blank" @click="openFileUrlfun(fileitem.anonymousFilePath)">{{ fileitem.fileName }}</a>
        </div>
        <van-icon v-if="canHQEdit == true" name="close" color="#ea0023" size="20"
                  @click="deleteFile('energyFusionInternetFile', index)" />
      </div>
    </div>
    <van-field v-if="huiqianType=='isCloud'" readonly required name="isCloud"
               :value="fromdata.isCloud" label="是否涉及融自有能力-移动云:" label-width="13em"
               :right-icon="canHQEdit ? 'arrow' : ''" @click="canHQEdit == true ? showOptionDialog('isCloud') : ''"
               placeholder="请选择是否涉及融自有能力-移动云" :rules="[{ required: canHQEdit, message: '' }]" />
    <div v-if="fromdata.isCloud=='是'&&huiqianType=='isCloud'">
      <van-field readonly required name="energyFusionCloudFile" label="融能支撑方案文件:" label-width="9em" center>
        <template v-if="canHQEdit == true" #button >
          <van-uploader name="energyFusionCloudFile" :after-read="didFinishPickingFiles">
            <van-button size="small" type="primary" color="#0f85cf">上传附件</van-button>
          </van-uploader>
        </template>
      </van-field>
      <div v-for="(fileitem, index) in fromdata.energyFusionCloudFile" :key="fileitem.id"
           style="margin-left: 20px">
        <div readonly class="font14 fileLink" style="color: #0f85cf">
          <a target="_blank" @click="openFileUrlfun(fileitem.anonymousFilePath)">{{ fileitem.fileName }}</a>
        </div>
        <van-icon v-if="canHQEdit == true" name="close" color="#ea0023" size="20"
                  @click="deleteFile('energyFusionCloudFile', index)" />
      </div>
    </div>
    <van-field v-if="huiqianType=='isData'" readonly required name="isData"
               :value="fromdata.isData" label="是否涉及融自有能力-大数据:" label-width="13em"
               :right-icon="canHQEdit ? 'arrow' : ''" @click="canHQEdit == true ? showOptionDialog('isData') : ''"
               placeholder="请选择是否涉及融自有能力-大数据" :rules="[{ required: canHQEdit, message: '' }]" />
    <div v-if="fromdata.isData=='是'&&huiqianType=='isData'">
      <van-field readonly required name="energyFusionBigDataFile" label="融能支撑方案文件:" label-width="9em" center>
        <template v-if="canHQEdit == true" #button >
          <van-uploader name="energyFusionBigDataFile" :after-read="didFinishPickingFiles">
            <van-button size="small" type="primary" color="#0f85cf">上传附件</van-button>
          </van-uploader>
        </template>
      </van-field>
      <div v-for="(fileitem, index) in fromdata.energyFusionBigDataFile" :key="fileitem.id"
           style="margin-left: 20px">
        <div readonly class="font14 fileLink" style="color: #0f85cf">
          <a target="_blank" @click="openFileUrlfun(fileitem.anonymousFilePath)">{{ fileitem.fileName }}</a>
        </div>
        <van-icon v-if="canHQEdit == true" name="close" color="#ea0023" size="20"
                  @click="deleteFile('energyFusionBigDataFile', index)" />
      </div>
    </div>
<!--    自主实施模块-->
    <div v-if="huiqianType=='isImplementationEnd'">
      <van-field readonly required name="isImplementationEnd"
                 :value="fromdata.isImplementationEnd" label="是否自主实施：" label-width="7em"
                 :right-icon="canHQEdit ? 'arrow' : ''" @click="canHQEdit == true ? showOptionDialog('isImplementationEnd') : ''"
                 placeholder="请选择是否自主实施" :rules="[{ required: canHQEdit, message: '' }]" />
      <van-field v-if="fromdata.isImplementationEnd == '是'" readonly required name="implementationTypeEnd"
                 :value="fromdata.implementationTypeEnd" label="项目自主实施类型：" label-width="9em"
                 :right-icon="canHQEdit ? 'arrow' : ''" @click="canHQEdit == true ? showOptionDialog('implementationTypeEnd') : ''"
                 placeholder="请选择项目自主实施类型" :rules="[{ required: canHQEdit, message: '' }]" />
      <van-field v-if="fromdata.isImplementationEnd == '是'" readonly required name="implementScopeEnd"
                 :value="fromdata.implementScopeEnd" label="自主实施范围：" label-width="7em"
                 :right-icon="canHQEdit ? 'arrow' : ''" @click="canHQEdit == true ? showOptionDialog('implementScopeEnd') : ''"
                 placeholder="请选择自主实施范围" :rules="[{ required: canHQEdit, message: '' }]" />
      <div v-if="fromdata.isImplementationEnd=='是'">
        <van-field readonly required name="isImplementationEndFile" label="自主实施支撑方案文件:" label-width="11em" center>
          <template v-if="canHQEdit == true" #button >
            <van-uploader name="isImplementationEndFile" :after-read="didFinishPickingFiles">
              <van-button size="small" type="primary" color="#0f85cf">上传附件</van-button>
            </van-uploader>
          </template>
        </van-field>
        <div v-for="(fileitem, index) in fromdata.isImplementationEndFile" :key="fileitem.id"
             style="margin-left: 20px">
          <div readonly class="font14 fileLink" style="color: #0f85cf">
            <a target="_blank" @click="openFileUrlfun(fileitem.anonymousFilePath)">{{ fileitem.fileName }}</a>
          </div>
          <van-icon v-if="canHQEdit == true" name="close" color="#ea0023" size="20"
                    @click="deleteFile('isImplementationEndFile', index)" />
        </div>
      </div>
      <myvan_field v-if="fromdata.isImplementationEnd == '否'" :can-edit="canHQEdit" :required='true' :type="'textarea'" :name='"implementationExplainEnd"' :model='fromdata.implementationExplainEnd'
                   :label='"无法自主实施说明:"' :placeholder='"请填写无法自主实施说明"'  @freshData='freshData($event)'/>
    </div>
    <!--    省专协同模块-->
    <div v-if="huiqianType=='isProfessionalAbilityEnd'">
      <van-field readonly required name="isProfessionalAbilityEnd"
                 :value="fromdata.isProfessionalAbilityEnd" label="是否涉及省专协同：" label-width="9em"
                 :right-icon="canHQEdit ? 'arrow' : ''" @click="canHQEdit == true ? showOptionDialog('isProfessionalAbilityEnd') : ''"
                 placeholder="请选择是否涉及省专协同" :rules="[{ required: canHQEdit, message: '' }]" />
      <myvan_field :can-edit="canHQEdit" :required='true' :name='"professionalAbilityExplainEnd"' :type="'textarea'" :model='fromdata.professionalAbilityExplainEnd'
                   :label='"使用或无法专业公司能力说明:"' :placeholder='"请填写使用或无法专业公司能力说明"'  @freshData='freshData($event)'/>
      <div v-if="fromdata.isProfessionalAbilityEnd=='是'">
        <van-field readonly required name="provinceSpecificFile" label="省专协同方案文件:" label-width="11em" center>
          <template v-if="canHQEdit == true" #button >
            <van-uploader name="provinceSpecificFile" :after-read="didFinishPickingFiles">
              <van-button size="small" type="primary" color="#0f85cf">上传附件</van-button>
            </van-uploader>
          </template>
        </van-field>
        <div v-for="(fileitem, index) in fromdata.provinceSpecificFile" :key="fileitem.id"
             style="margin-left: 20px">
          <div readonly class="font14 fileLink" style="color: #0f85cf">
            <a target="_blank" @click="openFileUrlfun(fileitem.anonymousFilePath)">{{ fileitem.fileName }}</a>
          </div>
          <van-icon v-if="canHQEdit == true" name="close" color="#ea0023" size="20"
                    @click="deleteFile('provinceSpecificFile', index)" />
        </div>
      </div>
    </div>
    <!--    中台能力模块-->
    <div v-if="huiqianType=='abilityInformationStateEnd'">
      <van-field readonly required name="abilityInformationStateEnd"
                 :value="fromdata.abilityInformationStateEnd=='true'?'是':'否'" label="是否使用中台能力：" label-width="9em"
                 :right-icon="canHQEdit ? 'arrow' : ''" @click="canHQEdit == true ? showOptionDialog('abilityInformationStateEnd') : ''"
                 placeholder="请选择是否使用中台能力" :rules="[{ required: canHQEdit, message: '' }]" />
      <div v-if="fromdata.abilityInformationStateEnd == 'true'" class="mt10"
           style=" display: flex;border-bottom: 1px solid #ebedf0;">
        <div class="blue_item"></div>
        <span class="font15" style="display: flex; line-height: 33px;margin-left:5px;  flex:1;">能力名称</span>
        <van-button v-show="canHQEdit" block type="info" style="display: inline-block;width:auto;height: 33px;"
                    native-type="button" @click="choseZTNL">选择中台能力</van-button>
      </div>
      <el-table v-if="fromdata.abilityInformationStateEnd == 'true'" :data="fromdata.abilityInformationModeListEnd" border style="width: 100%" :header-cell-style="{ 'text-align': 'center' }"
                :cell-style="{ 'text-align': 'center' }" show-summary>
        <el-table-column prop="abilityProvider" label="能力提供方"/>
        <el-table-column prop="abilityName" label="能力名称"/>
        <el-table-column prop="abilityCode" label="能力编码"/>
      </el-table>
      <div v-if="fromdata.abilityInformationStateEnd=='true'">
        <van-field readonly required name="middleCapabilityFile" label="使用中台能力方案文件:" label-width="11em" center>
          <template v-if="canHQEdit == true" #button >
            <van-uploader name="middleCapabilityFile" :after-read="didFinishPickingFiles">
              <van-button size="small" type="primary" color="#0f85cf">上传附件</van-button>
            </van-uploader>
          </template>
        </van-field>
        <div v-for="(fileitem, index) in fromdata.middleCapabilityFile" :key="fileitem.id"
             style="margin-left: 20px">
          <div readonly class="font14 fileLink" style="color: #0f85cf">
            <a target="_blank" @click="openFileUrlfun(fileitem.anonymousFilePath)">{{ fileitem.fileName }}</a>
          </div>
          <van-icon v-if="canHQEdit == true" name="close" color="#ea0023" size="20"
                    @click="deleteFile('middleCapabilityFile', index)" />
        </div>
      </div>
      <myvan_field v-if="fromdata.abilityInformationStateEnd != 'true'" :can-edit="canHQEdit" :required='true' :type="'textarea'" :name='"abilityInformationExplainEnd"' :model='fromdata.abilityInformationExplainEnd'
                   :label='"无法使用中台能力说明:"' :placeholder='"请填写无法使用中台能力说明"'  @freshData='freshData($event)'/>
    </div>
    <!--    安全能力模块-->
    <div v-if="huiqianType=='isSecurityCapabilityEnd'">
      <van-field readonly required name="isSecurityCapabilityEnd"
                 :value="fromdata.isSecurityCapabilityEnd" label="是否使用安全能力：" label-width="9em"
                 :right-icon="canHQEdit ? 'arrow' : ''" @click="canHQEdit == true ? showOptionDialog('isSecurityCapabilityEnd') : ''"
                 placeholder="请选择是否使用安全能力" :rules="[{ required: canHQEdit, message: '' }]" />
      <van-field v-if="fromdata.isSecurityCapabilityEnd == '是'" readonly required name="securityCapabilityEnd"
                 :value="fromdata.securityCapabilityEnd" label="涉及安全能力：" label-width="7em"
                 :right-icon="canHQEdit ? 'arrow' : ''" @click="canHQEdit == true ? showOptionDialog('securityCapabilityEnd') : ''"
                 placeholder="请选择涉及安全能力" :rules="[{ required: canHQEdit, message: '' }]" />
      <div v-if="fromdata.isSecurityCapabilityEnd=='是'">
        <van-field readonly required name="securityCapabilityFile" label="使用安全能力方案文件:" label-width="11em" center>
          <template v-if="canHQEdit == true" #button >
            <van-uploader name="securityCapabilityFile" :after-read="didFinishPickingFiles">
              <van-button size="small" type="primary" color="#0f85cf">上传附件</van-button>
            </van-uploader>
          </template>
        </van-field>
        <div v-for="(fileitem, index) in fromdata.securityCapabilityFile" :key="fileitem.id"
             style="margin-left: 20px">
          <div readonly class="font14 fileLink" style="color: #0f85cf">
            <a target="_blank" @click="openFileUrlfun(fileitem.anonymousFilePath)">{{ fileitem.fileName }}</a>
          </div>
          <van-icon v-if="canHQEdit == true" name="close" color="#ea0023" size="20"
                    @click="deleteFile('securityCapabilityFile', index)" />
        </div>
      </div>
      <myvan_field v-if="fromdata.isSecurityCapabilityEnd == '否'" :can-edit="canHQEdit" :required='true' :type="'textarea'" :name='"securityCapabilityExplainEnd"' :model='fromdata.securityCapabilityExplainEnd'
                   :label='"无法使用安全能力说明:"' :placeholder='"请填写无法使用安全能力说明"'  @freshData='freshData($event)'/>
    </div>
    <!--    5G能力模块-->
    <div v-if="huiqianType=='isFiveCapabilityEnd'">
      <van-field readonly required name="isFiveCapabilityEnd"
                 :value="fromdata.isFiveCapabilityEnd" label="是否使用5G能力：" label-width="9em"
                 :right-icon="canHQEdit ? 'arrow' : ''" @click="canHQEdit == true ? showOptionDialog('isFiveCapabilityEnd') : ''"
                 placeholder="请选择是否使用5G能力" :rules="[{ required: canHQEdit, message: '' }]" />
      <van-field v-if="fromdata.isFiveCapabilityEnd == '是'" readonly required name="fiveCapabilityEnd"
                 :value="fromdata.fiveCapabilityEnd" label="涉及5G能力：" label-width="7em"
                 :right-icon="canHQEdit ? 'arrow' : ''" @click="canHQEdit == true ? showOptionDialog('fiveCapabilityEnd') : ''"
                 placeholder="请选择涉及5G能力" :rules="[{ required: canHQEdit, message: '' }]" />
      <div v-if="fromdata.isFiveCapabilityEnd=='是'">
        <van-field readonly required name="fiveCapabilityFile" label="使用5G能力方案文件:" label-width="10em" center>
          <template v-if="canHQEdit == true" #button >
            <van-uploader name="fiveCapabilityFile" :after-read="didFinishPickingFiles">
              <van-button size="small" type="primary" color="#0f85cf">上传附件</van-button>
            </van-uploader>
          </template>
        </van-field>
        <div v-for="(fileitem, index) in fromdata.fiveCapabilityFile" :key="fileitem.id"
             style="margin-left: 20px">
          <div readonly class="font14 fileLink" style="color: #0f85cf">
            <a target="_blank" @click="openFileUrlfun(fileitem.anonymousFilePath)">{{ fileitem.fileName }}</a>
          </div>
          <van-icon v-if="canHQEdit == true" name="close" color="#ea0023" size="20"
                    @click="deleteFile('fiveCapabilityFile', index)" />
        </div>
      </div>
      <myvan_field v-if="fromdata.isFiveCapabilityEnd == '否'" :can-edit="canHQEdit" :required='true' :type="'textarea'" :name='"fiveCapabilityExplainEnd"' :model='fromdata.fiveCapabilityExplainEnd'
                 :label='"无法使用5G能力说明:"' :placeholder='"请填写无法使用5G能力说明"'  @freshData='freshData($event)'/>
    </div>
    <!--    会议模块-->
    <div v-if="huiqianType=='HYTime'">
      <van-field readonly required name="meetingDate" v-model="fromdata.meetingDate" label="会议时间："
                 label-width="10em" :right-icon="canHQEdit ? 'arrow' : ''" @click="changeOpenDateShowPopup = canHQEdit"
                 :rules="[{ required: canHQEdit, message: '请选择会议时间' }]" />
      <van-popup v-model="changeOpenDateShowPopup" position="bottom" get-container="body">
        <van-datetime-picker v-model="currentDate" :formatter="formatter" type="date" @confirm="changeOpenDateComfirm"
                             @cancel="changeOpenDateShowPopup = false"></van-datetime-picker>
      </van-popup>
      <myvan_field :can-edit="canHQEdit" :required='true' :type="'textarea'" :name='"meetingPlace"' :model='fromdata.meetingPlace'
                   :label='"会议地点:"' :placeholder='"请填写会议地点"'  @freshData='freshData($event)'/>
      <div>
        <van-field readonly name="businessJudgedAdminFile" label="附件:" label-width="3em" center>
          <template v-if="canHQEdit == true" #button >
            <van-uploader name="businessJudgedAdminFile" :after-read="didFinishPickingFiles">
              <van-button size="small" type="primary" color="#0f85cf">上传附件</van-button>
            </van-uploader>
          </template>
        </van-field>
        <div v-for="(fileitem, index) in fromdata.businessJudgedAdminFile" :key="fileitem.id"
             style="margin-left: 20px">
          <div readonly class="font14 fileLink" style="color: #0f85cf">
            <a target="_blank" @click="openFileUrlfun(fileitem.anonymousFilePath)">{{ fileitem.fileName }}</a>
          </div>
          <van-icon v-if="canHQEdit == true" name="close" color="#ea0023" size="20"
                    @click="deleteFile('businessJudgedAdminFile', index)" />
        </div>
      </div>
    </div>
    <div style="height: 50px"></div>
    <van-popup v-model="showTypePopup" position="bottom" get-container="#app">
      <van-picker visible-item-count="6" show-toolbar :columns="typeColumns" @confirm="showConfirm"
                  @cancel="showTypePopup = false" />
    </van-popup>
    <van-popup v-model="showAbilitySelect" position="center" get-container="#app" style="width: 80%">
      <van-checkbox-group v-model="checkboxResult">
        <van-cell-group>
          <van-cell
              v-for="(item, index) in typeColumns"
              clickable
              :key="item"
              :title="`${item}`"
              @click="toggle(index)"
          >
            <template #right-icon>
              <van-checkbox :name="item" ref="checkboxes" />
            </template>
          </van-cell>
        </van-cell-group>
      </van-checkbox-group>
      <div style="display: flex;margin:20px;align-items: center;justify-content: space-between">
          <van-button style="width: 110px "
                      @click="resetButtonClick()" type="default">
            取消</van-button>
          <van-button style="width: 110px "
                      @click="sureButtonClick()" type="primary" color="#60a9ec">
            确认</van-button>
      </div>
    </van-popup>
  </div>
</template>
<script>
import { getDictList,uploadFileCommon } from '@/api/dictapi'
import { mapGetters } from "vuex"
import moment from 'moment'
import {Dialog, Notify, Toast} from "vant";
import SectionHeader from '../sztdzj/sztdzjDetail/section-header.vue';
import historyAndSuggs from "@/views/srqr/historyAndSuggs.vue";
import myvan_field from "@/components/myvanfield/index.vue";
import { openFileUrl } from '@/store/openFile'
export default {
  data() {
    return {
      checkboxResult:[],
      checkboxColumns:["1","2"],
      showAbilitySelect:false,
      optionType:'',
      typeColumns:[],
      showTypePopup:false,
      showDateDialog:false,
      nowDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate()),
      strDate: new Date(new Date().getFullYear() - 10, new Date().getMonth(), new Date().getDate()),
      maxDate: new Date(new Date().getFullYear() + 10, new Date().getMonth(), new Date().getDate()),
      showDateType:'',
      popType:'',
      showPop:'',
      ztnllistdata: {},
      changeOpenDateShowPopup: false,
      currentDate: new Date(),
    }
  },
  computed: {
    ...mapGetters(['user']),
  },
  props: {
    canHQEdit: {
      type: Boolean,
      default: false
    },
    canEdit: {
      type: Boolean,
      default: false
    },
    fromdata: {
      type: Object,
      default: {}
    },
    canEditFile: {
      type: Boolean,
      default: false
    },
    huiqianType: {
      type: String,
      default: ''
    }
  },
  watch: {
    fromdata: {
      handler () { //这是vue的规定写法，当你watch的值发生变化的时候，就会触发这个handler，这是vue内部帮你做的事情
        this.$emit('freshData',this.fromdata)
      },
      deep: true,  // 可以深度检测到 obj 对象的属性值的变化
      immediate: true //刷新加载  立马触发一次handler
    },
  },
  created() {

  },
  activated(){
    if (localStorage.getItem('ztnllistdata') != '{}' && localStorage.getItem('ztnllistdata')) {
      this.ztnllistdata = JSON.parse(localStorage.getItem('ztnllistdata'))
      if (!this.fromdata.abilityInformationModeList) {
        this.fromdata.abilityInformationModeList = []
      }
      this.fromdata.abilityInformationModeList.push(this.ztnllistdata)
      if (!this.fromdata.abilityInformationMapList) {
        this.fromdata.abilityInformationMapList = []
      }
      this.fromdata.abilityInformationMapList.push(this.ztnllistdata)
      this.fromdata = JSON.parse(JSON.stringify(this.fromdata));
    }
  },
  methods: {
    freshData(value) {
      this.fromdata[value.name] = value.data
    },
    showOptionDialog(type) {
      this.optionType = type
      if (type == 'implementationType'&&(!this.fromdata.isImplementation||this.fromdata.isImplementation=='')){
        Notify('请先选择是否自主实施')
        return
      }else if (type == 'implementationTypeEnd'&&(!this.fromdata.isImplementationEnd||this.fromdata.isImplementationEnd=='')){
        Notify('请先选择是否自主实施')
        return
      }
      if (type == 'abilitySelect') {//不需要自定义直接去请求接口的
        getDictList(type, { userName: this.user.userName })
            .then((result) => {
              if (!result.data) {
                Notify(result.message);
                return;
              }
              this.typeColumns = [];
              for (var i = 0; i < result.data.data.length; i++) {
                this.typeColumns.push(result.data.data[i].name);
              }
              if(type == 'abilitySelect'){
                this.showAbilitySelect = true;
              }else{
                this.showTypePopup = true;
              }
            })
      }else if((type == 'implementationType'&&this.fromdata.isImplementation=='是')||(type == 'implementationTypeEnd'&&this.fromdata.isImplementationEnd=='是')){
        this.typeColumns = ['自主项目管理','自主集成','自主开发','自主服务','自主应用'];
        this.showAbilitySelect = true;
      }else if((type == 'implementationType'&&this.fromdata.isImplementation=='否')||(type == 'implementationTypeEnd'&&this.fromdata.isImplementationEnd=='否')){
        this.typeColumns = ['非自主项目'];
        this.showAbilitySelect = true;
      } else if(type == 'implementScope'||type == 'implementScopeEnd'){
        this.typeColumns = ['项目整体自主实施','项目部分自主实施'];
        this.showTypePopup = true;
      }else if(type == 'securityCapability'||type == 'securityCapabilityEnd'){
        this.typeColumns = ['等保合规','安全运营中心SOC','云安全','信创云','和盾抗D','专线卫士','IOT安全','超级SIM网关','其他'];
        this.showAbilitySelect = true;
      }else if(type == 'fiveCapability'||type == 'fiveCapabilityEnd'){
        this.typeColumns = ['5G快线','5G双域专网','5G流量专网','5G入驻专网','其他'];
        this.showAbilitySelect = true;
      }else {//其余需要自定义的
        this.typeColumns = ['是', '否'];
        this.showTypePopup = true;
      }
    },
    showConfirm(value){
      console.log("选择后的"+value)
      if (this.optionType == 'implementScope'||this.optionType == 'implementScopeEnd') {
        this.fromdata[this.optionType]=value
      }else if (this.optionType == 'abilityInformationState') {
        if(value=="是"){
          this.fromdata[this.optionType]=true
        }else{
          this.fromdata[this.optionType]=false
        }
      }else if (this.optionType == 'abilityInformationStateEnd') {
        if(value=="是"){
          this.fromdata[this.optionType]='true'
        }else{
          this.fromdata[this.optionType]='false'
        }
      }else{
          this.fromdata[this.optionType]=value
      }
      this.showTypePopup=false
    },
    toggle(index) {
      this.$refs.checkboxes[index].toggle();
    },
    resetButtonClick(){
      this.showAbilitySelect = false;
    },
    sureButtonClick(){
      console.log("BBBBB"+this.checkboxResult)
      this.showAbilitySelect = false;
      this.fromdata[this.optionType]=this.checkboxResult
      // if(type == 'abilitySelect'){
      //   this.fromdata.abilitySelect=this.checkboxResult
      // }else if(type == 'implementationType'){
      //   this.fromdata.implementationType=this.checkboxResult
      // }

    },
    openFileUrlfun(value) {
      this.$router.push(
          {
            name: 'fileview',
            query: {
              openFileUrl: openFileUrl(value)
            }
          }
      );
    },
    /// 本地文件选中后的回调
    didFinishPickingFiles(file, detail) {
      console.log('照片上传', detail.name, this.fromdata[detail.type]);

      let fileData = new FormData();
      fileData.append("pmInsType", this.pmInsType);
      fileData.append("pmInsTypePart", "1");
      fileData.append("files", file.file);

      let params = new Map();
      params.pmInsType = this.pmInsType;
      params.pmInsTypePart = '1';
      params.userName = this.user.userName;
      uploadFileCommon(fileData, params).then((res) => {
        if (!res.data) {
          Notify(res.message);
          return;
        }
        if (res.data.data) {
          this.showUploadFiles(res.data.data, detail.name);
        }
      });
    },
    // 上传附近后的 回显
    showUploadFiles(fileData, key) {
      if (this.fromdata[key] === null ||
          this.fromdata[key] === undefined) {
        this.fromdata[key] = [];
      }
      console.log('照片回显', key, this.fromdata[key]);
      this.fromdata[key].push(fileData.sysFiles[0]);
      this.$forceUpdate(); // 强制刷新界面
    },

    deleteFile(key, index) {
      Dialog.confirm({ title: "提示", message: "是否删除此附件？" })
          .then(() => {
            this.fromdata[key].splice(index, 1);
            this.$forceUpdate(); // 强制刷新界面
          })
          .catch(() => { });
    },
    choseZTNL() {
      this.$router.push(
          {
            name: 'seletesjlist',
            query: {
              seleteType: 'ztnl'
            }
          }
      );
    },
    formatter(type, val) {
      if (type === 'year') {
        return `${val}年`;
      }
      else if (type === 'month') {
        return `${val}月`;
      }
      else if (type === 'day') {
        return `${val}日`;
      }

      return val;
    },

    changeOpenDateComfirm(value) {

      this.changeOpenDateShowPopup = false;

      let changeOpenDate = moment(value).format('YYYY-MM-DD');
      this.currentDate = changeOpenDate;
      this.fromdata.meetingDate = changeOpenDate;
    },
  },
  components: {
    myvan_field,
    historyAndSuggs,
    SectionHeader
  }
}
</script>

<style>
.tables.el-table .cell {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-all;
  line-height: 15px;
  padding-left: 5px;
  padding-right: 5px;
}
</style>